<template>
  <div class="orderdetail">
    <h4>订单编号:{{detail.orderNum}}</h4>
    <div>
      <p>订单状态:{{detail.status ==1?'已下单':''}}</p>
      <p>联系人姓名:{{detail.contactName}}</p>
      <p>联系人电话:{{detail.contactMobile}}</p>
      <p>送货地址:{{detail.contactAddress}}</p>
      <p>订单金额:{{detail.price/100}}</p>
    </div>
    <el-table
      :data="shop"
      style="width: 100%"
    >
      <el-table-column
        label="商品"
        width="100px"
      >
        <template slot-scope="scope">
          <img
            :src="'http://139.198.178.82:9090/Shopping/'+scope.row.productList[0].defaultImg"
            style="width:70px;height:70px"
          >
        </template>
      </el-table-column>
      <el-table-column
        label=""
        width="500px"
      >
        <template slot-scope="scope">
          {{scope.row.productList[0].name}}
        </template>
      </el-table-column>
      <el-table-column
        label="选项"
        width="50px"
      >
      </el-table-column>
      <el-table-column
        label="单价"
        width="100px"
      >
        <template slot-scope="scope">
          {{scope.row.productList[0].shopPrice/100}}
        </template>
      </el-table-column>
      <el-table-column
        label="数量"
        width="100px"
      >
        <template slot-scope="scope">
          {{scope.row.quantity}}
        </template>
      </el-table-column>
      <el-table-column
        label="合计金额"
        width="100px"
      >
        <template slot-scope="scope">
          {{scope.row.quantity * scope.row.productList[0].shopPrice/100}}
        </template>
      </el-table-column>
    </el-table>
    <p
      style="text-align:right;margin:25px"
      v-if="this.status==0"
    >
      <el-button
        type="primary"
        @click="pay(detail.orderNum)"
      >立即支付</el-button>
    </p>
  </div>
</template>

<script>
export default {
  name: "orderdetail",
  data() {
    return {
      ordernum: "",
      shop: [],
      detail: [],
      status: "",
    };
  },
  methods: {
    getdetail() {
      this.$post(
        "http://139.198.178.82:9090/Shopping/api/v1//user/orders/detail",
        {
          userId: this.$store.state.user.id,
          orderNum: this.ordernum,
        }
      ).then((res) => {
        if (res.errorCode == "0") {
          this.detail = res.data;
          this.shop = res.data.orderItemList;
          this.status = res.data.paymentFlag;
        }
      });
    },
    pay(num) {
      sessionStorage.setItem("ordernum", num);
      this.$router.push("/zhifu");
    },
  },
  created() {
    this.ordernum = sessionStorage.getItem("ordernum");
    this.getdetail();
  },
};
</script>

<style scoped>
p {
  margin-bottom: 10px;
}
</style>